<template>
  <div class="dswd-menu">
    <ul class="dswd-menu-list">
      <template v-for="menu of menuData">
        <li
          :key="menu.id"
          class="dswd-menu-item"
          :class="{
            'is-active': activePath === menu.path
          }"
        >
          <a
            class="dswd-menu-item-title"
            :href="menu.path"
            @mouseover="hoverItem(menu)"
            @mouseleave="leaveItem"
          >{{ menu.name }}<i v-if="menu.children !== undefined && menu.children.length > 0" class="el-icon-caret-bottom index_arrow__sadCK" :class="showDropdownList ? 'index_arrow__sadCK_rotate' : ''" />
            <transition name="fade">
              <el-card
                v-show="menu.children !== undefined && menu.children.length > 0 && showDropdownList"
                class="dswd-menu-item-dropdown-list"
                @mouseover="showDropdownList = true"
                @mouseleave="showDropdownList = false"
              >
                <template v-for="childMenu of menu.children">
                  <div :key="childMenu.key" class="dswd-menu-item-dropdown-item">
                    <a :href="childMenu.path">
                      {{ childMenu.name }}
                    </a>
                  </div>
                </template>
              </el-card>
            </transition>
          </a>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      showDropdownList: false
    }
  },
  props: {
    menuData: {
      type: Array,
      default: () => []
    },
    activePath: {
      type: String,
      default: () => null
    }
  },
  methods: {
    hoverItem(menu) {
      if (menu.children !== undefined && menu.children.length > 0) {
        this.showDropdownList = true
      }
    },
    leaveItem() {
      this.showDropdownList = false
    }
  }
}
</script>

<style lang="scss" scoped>
.dswd-menu {
  .dswd-menu-list {
    display: flex;
    justify-content: flex-end;
    .dswd-menu-item-open {
      background: #fff;
    }
    .dswd-menu-item {
      cursor: pointer;
      margin: 0 5px;
      font-size: 14px;
      font-weight: 400;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      &:hover,
      :active {
        color: #078FD8;
      }
      .dswd-menu-item-title {
        padding: 27px 15px;
        position: relative;
        display: inline-block;
        color: #595959;
        box-sizing: border-box;
        border-bottom: 4px solid transparent;
        &::after{
          width: 100%;
        }
        &:hover{
          color: #078FD8;
          border-bottom: 4px solid #078FD8;
        }
        .index_arrow__sadCK{
          margin-left: 6px;
          transition: all 0.2s;
        }
        .index_arrow__sadCK_rotate{
          transform: rotate(180deg);
        }
      }
      .dswd-menu-item-dropdown-list {
        position: absolute;
        top: 80px;
        left: 0;
        min-width: 100px;
        min-height: 100px;
        border-radius: 10px;
        .dswd-menu-item-dropdown-item{
          line-height: 1;
          padding: 10px 0;
          a{
            color: #595959;
            &:hover{
              color: #078FD8;
            }
          }
        }
      }
    }
    .is-active .dswd-menu-item-title{
        color: #078FD8;
        border-bottom: 4px solid #078FD8;
    }
  }
}
</style>
